<template>
  <div id="TYearmain"></div>
</template>

<script>
import * as echarts from "echarts/core";
import { TitleComponent, LegendComponent } from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

export default {
  name: "TYear",
  mounted() {
    echarts.use([
      TitleComponent,
      LegendComponent,
      PieChart,
      CanvasRenderer,
      LabelLayout,
    ]);

    var chartDom = document.getElementById("TYearmain");
    var myChart = echarts.init(chartDom);
    var option;

    const chartData = [
      {
        value: 98,
        name: "本科",
      },
      {
        value: 309,
        name: "硕士",
      },
      {
        value: 54,
        name: "博士",
      },
    ];
    const color = ["#975fe4", "#45a5ff", "#81c926"];
    let sum = chartData.reduce((per, cur) => per + cur.value, 0);
    option = {
      title: {
        show: true,
        text: "教师总数",
        subtext: sum,
        x: "24%",
        y: "38%",
        textStyle: {
          color: "#79E2F9",
          fontSize: 15,
          fontWeight: "400",
        },
        subtextStyle: {
          color: "rgba(121, 226 ,249,0.85)",
          fontSize: 18,
          fontWeight: "400",
        },
        textAlign: "center",
      },
      legend: {
        orient: "vertical",
        icon: "circle",
        // 四列的样式
        textStyle: {
          color: "#373737",
          fontSize: "15px",
          rich: {
            name: {
              color: "rgba(121, 226 ,249,0.65)",
              fontSize: 13,
              width: 120,
              fontWeight: 400,
              padding: [0, 0, 0, 2],
            },
            symbol: {
              color: "rgba(255,255,255,0.45)",
              fontSize: 13,
              fontWeight: 400,
              padding: [0, 0, 0, -40],
            },
            percent: {
              color: "rgba(255,255,255,0.45)",
              fontSize: 13,
              fontWeight: 400,
              width: 60,
              padding: [0, 0, 0, 4],
            },
            value: {
              color: "rgba(255,255,255,0.65)",
              fontSize: 13,
              fontWeight: 400,
              padding: [0, 0, 0, -15],
            },
          },
        },
        //图标样式
        top: "center",
        right: "5%",
        itemGap: 10,
        itemHeight: 18,
        itemWidth: 18,
        data: chartData.map((item) => item.name), // 修改此处
        formatter: function (name) {
          let obj = {};
          if (name) {
            obj = chartData.find((item) => item.name === name);
          }
          return `{name|${name}}{symbol| |}{percent|${
            obj.value && ((obj.value / sum) * 100).toFixed(0)
          }%}{value|${obj.value || 0}}`;
        },
      },
      series: [
        {
          name: "",
          type: "pie",
          roundCap: true,
          radius: ["45%", "70%"],
          center: ["25%", "50%"],
          startAngle: 180, //起始角度
          data: chartData,
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 2.5,
            borderRadius:'5px',
            color: function (params) {
              return color[params.dataIndex];
            },
          },
          labelLine: {
            length: 8,
            length2: 16,
            lineStyle: {
              width: 1,
            },
          },
          label: {
            show: false,
            fontFamily: "ysbth",
            position: "outside",
            padding: [0, -4, 0, -4],
            formatter(params) {
              if (params.name === "") {
                return "";
              }
              return `${params.percent.toFixed(0)}%`;
            },
            color: "#fff",
            fontSize: "14px",
            lineHeight: 10,
          },
        },
      ],
    };

    option && myChart.setOption(option);
  },
};
</script>

<style scoped>
#TYearmain {
  width: 400px;
  height: 200px;
}
</style>
